<template>
    <div class="floorView" ref="clientHeight">
        <div class="box">
            <div class="floorUp" ref="box1H" :style="{'height':box1H}">
                <img src="../assets/nl/floor.png" alt="">            
            </div>      
            <div class="floorDown" ref="box2H" :style="{'height':box2H}">
                <div class="itemImg"><img src="../assets/nl/shop.png" alt=""></div>
                <div class="itemDown">
                    <h2>CDC潮流男装店铺</h2>                                     
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  name: "floorView",
  data() {
    return {
      clientHeight: "",
      box1H:'',
      box2H:''
    };
  },
  mounted() {
    this.clientHeight = `${document.documentElement.clientHeight}`;
    console.log(this.clientHeight)
  },
  watch: {
    clientHeight: function() {
      this.changeBoxH(this.clientHeight);
    }
  },
  methods: {
    changeBoxH(clientHeight) {
      this.box1H = clientHeight * 62 / 100 + "px";
      this.$refs.box1H.style.height = this.box1H;
      this.box2H = clientHeight * 24 / 100 + "px";
      this.$refs.box2H.style.height = this.box2H;
    }
  }
};
</script>

<style lang="scss">
    .floorView
    {
        box-sizing: border-box;
    }
@media screen and (max-width: 359px) {
  .floorView {
    padding-left: 2%;
    padding-right: 2%;
    // height: 13rem;
    .box {
      margin-left: 2%;
      margin-right: 2%;
      width: 100%;
      .floorUp {
        width: 96%;
        // height: 17rem;
        border-radius: 0.7rem 0.7rem 0.7rem 0.7rem;
        margin-bottom: 0.6rem;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .floorDown {
        width: 96%;
        box-sizing: border-box;
        background-color: #fff;
        color: black;
        // height: 10rem;
        overflow: hidden;
        padding: 1rem 1rem 1rem 1rem;
        border-radius: 0.7rem 0.7rem 0.7rem 0.7rem;
        .itemImg {
          width: 48%;
          height: 100%;
          overflow: hidden;
          float: left;
          border-radius: 1rem 1rem 1rem 1rem;
        }
        .itemDown {
          width: 52%;
          float: left;
          text-align: left;
          padding-left: 0.5rem;
          h2 {
            padding: 0.2rem 0;
          }
          .texts {
            color: #b3b3b3;
            overflow: hidden;
            -webkit-line-clamp: 4;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
          }
          .date {
            color: #bb9372;
          }
        }
      }
    }
  }
}
@media screen and (min-width: 360px) and (max-width: 410px) {
  .floorView {
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 1rem;
    // height: 13rem;
    .box {
      margin-left: 2%;
      margin-right: 2%;
      width: 100%;
      .floorUp {
        width: 96%;
        // height: 25rem;
        border-radius: 0.7rem 0.7rem 0.7rem 0.7rem;
        margin-bottom: 0.6rem;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .floorDown {
        width: 96%;
        box-sizing: border-box;
        background-color: #fff;
        color: black;
        // height: 10rem;
        overflow: hidden;
        padding: 1rem 1rem 1rem 1rem;
        border-radius: 0.7rem 0.7rem 0.7rem 0.7rem;
        .itemImg {
          width: 48%;
          height: 100%;
          overflow: hidden;
          float: left;
          border-radius: 1rem 1rem 1rem 1rem;
        }
        .itemDown {
          width: 52%;
          float: left;
          text-align: left;
          padding-left: 0.5rem;
          h2 {
            padding: 0.2rem 0;
          }
          .texts {
            color: #b3b3b3;
            overflow: hidden;
            -webkit-line-clamp: 4;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
          }
          .date {
            color: #bb9372;
          }
        }
      }
    }
  }
}
@media screen and (min-width: 411px){
  .floorView {
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 1rem;    
    .box {
      margin-left: 2%;
      margin-right: 2%;
      width: 100%;
      .floorUp {
        width: 96%;        
        border-radius: 0.7rem 0.7rem 0.7rem 0.7rem;
        margin-bottom: 0.6rem;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .floorDown {
        width: 96%;
        box-sizing: border-box;
        background-color: #fff;
        color: black;
        // height: 10rem;
        overflow: hidden;
        padding: 1rem 1rem 1rem 1rem;
        border-radius: 0.7rem 0.7rem 0.7rem 0.7rem;
        .itemImg {
          width: 48%;
          height: 100%;
          overflow: hidden;
          float: left;
          border-radius: 1rem 1rem 1rem 1rem;
        }
        .itemDown {
          width: 52%;
          float: left;
          text-align: left;
          padding-left: 0.5rem;
          h2 {
            padding: 0.2rem 0;
          }
          .texts {
            color: #b3b3b3;
            overflow: hidden;
            -webkit-line-clamp: 4;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
          }
          .date {
            color: #bb9372;
          }
        }
      }
    }
  }
}
</style>
